<script setup>
import {onMounted, ref} from "vue";
import myAxios from "@/plugins/myAxios";
import {Message} from "@arco-design/web-vue";
import dayjs from "dayjs";

const columns = [{
  title: '姓名',
  dataIndex: 'name',
}, {
  title: '电话号',
  dataIndex: 'phone',
}, {
  title: '身份证号',
  dataIndex: 'identity',
},{
  title: '房间号',
  dataIndex: 'newRoomId',
},{
  title: '花费',
  dataIndex: 'cost',
},{
  title: '入住时间',
  dataIndex: 'startTime',
},{
  title: '退房时间',
  dataIndex: 'endTime',
}, {
  title: '操作',
  slotName: 'optional'
}];
//顾客信息
const userAndRoomData = ref([{

}])

const form = ref({
  id:'',
  name: '',
  phone: '',
  oldRoomId:'',
  newRoomId: '',
  search:'',
  cost:'',
  startTime:'',
  endTime:'',
  identity:'',
  selectedValue:''
})

const addVisible = ref(false)
const visible = ref(false)

onMounted(async() => {
  await loadUserData()
})
//加载顾客和房间信息
const loadUserData = async() =>{
  const res = await myAxios.get('/menu/customer/list');
  if (res.data.code === '200'){
    userAndRoomData.value = res.data.data

    userAndRoomData.value.forEach(item => {
      item.startTime = dayjs(item.startTime).format("YYYY-MM-DD");
      item.endTime = dayjs(item.endTime).format("YYYY-MM-DD");
    });
    console.log("userAndRoomData:",userAndRoomData)
    console.log("dish:",userAndRoomData.value)
    Message.success('请求成功')
  }else
    Message.error('请求失败')
}

const handleCancel = () => {
  visible.value = false;
}

//点击修改按钮
const updateInfo = (record) => {
  form.value.oldRoomId = record.newRoomId
  form.value.name = record.name
  form.value.phone = record.phone
  form.value.newRoomId = record.newRoomId
  form.value.id = record.id
  form.value.startTime = record.startTime
  form.value.endTime = record.endTime
  form.value.cost = record.cost
  visible.value = true;
}
//点击修改按钮之后点击确定
const handleOk = async () => {
  const res = await myAxios.post('/menu/customer/update',{
    id: form.value.id,
    name: form.value.name,
    phone: form.value.phone,
    newRoomId: form.value.newRoomId,
    oldRoomId: form.value.oldRoomId,
    startTime: form.value.startTime,
    endTime: form.value.endTime,
    cost: form.value.cost
  })
  if (res) {
    Message.success('修改成功')
    await loadUserData()
  }
}

//删除房间信息
const deleteInfo = async (record) => {
  const res = await myAxios.delete('/menu/customer/delete',{
    params:{
      id: record.id,
      roomId: record.newRoomId
    }
  })
  console.log("deleteRes:",res);
  if (res.data.code === '200'){
    Message.success("删除成功")
    await loadUserData()
  }else {
    Message.error(res.data.msg)
  }
}

//开始时间(给form赋值)
function onChangeStart(startValue) {
  console.log('onChange-startValue:',startValue);
  form.value.startTime = startValue
  console.log("startTime",form.value.startTime)
}
//结束时间(给form赋值)
function onChangeEnd(endValue) {
  console.log('onChange-endValue:',endValue);
  form.value.endTime = endValue;
  console.log("endTime",form.value.endTime)
}

//添加菜品
const addCustomerOk = async () => {
  const res = await myAxios.post('/menu/customer/add',{
    name: form.value.name,
    newRoomId: form.value.newRoomId,
    identity:form.value.identity,
    phone: form.value.phone,
    startTime: form.value.startTime,
    endTime: form.value.endTime
  })
  if (res){
    await loadUserData();
    Message.success('添加成功')
  }else {
    Message.error('添加失败')
  }
}

//执行搜索
const doSearch = async() =>{
  const res = await myAxios.post('/menu/customerInfo/search',{
    key:form.value.selectedValue,
    value:form.value.search
  })
  if (res.data.code === '200'){
    userAndRoomData.value = res.data.data
    userAndRoomData.value.forEach(item => {
      item.startTime = dayjs(item.startTime).format("YYYY-MM-DD");
      item.endTime = dayjs(item.endTime).format("YYYY-MM-DD");
    });
    Message.success("查询成功")
  }else {
    Message.error("查询失败")
  }
  console.log("searchRes:",res)
}
const pagination = {pageSize: 9}
</script>

<template>
<div>
  <div style="margin-bottom: 10px;display: flex">
    <a-button type="primary" @click="addVisible = true">新增</a-button>
    <a-space direction="horizontal" size="large" style="margin-left: auto">
      <a-select v-model="form.selectedValue" style="margin-left: auto" :style="{width:'120px'}" placeholder="搜索属性" :trigger-props="{ autoFitPopupMinWidth: true }">
        <a-option>房号</a-option>
        <a-option>入住时间</a-option>
        <a-option>退房时间</a-option>
      </a-select>
      <a-input-search v-model="form.search" :style="{width:'320px'}" placeholder="搜索" @search="doSearch" search-button/>
    </a-space>
    <a-modal v-model:visible="addVisible" title="添加顾客信息" @cancel="handleCancel" @ok="addCustomerOk">
      <a-form :model="form">
        <a-form-item field="name" label="姓名">
          <a-input v-model="form.name" />
        </a-form-item>
        <a-form-item field="newRoomId" label="房间号">
          <a-input v-model="form.newRoomId" />
        </a-form-item>
        <a-form-item field="identity" label="身份证号">
          <a-input v-model="form.identity" />
        </a-form-item>
        <a-form-item field="phone" label="电话号">
          <a-input v-model="form.phone" />
        </a-form-item>
        <a-form-item field="startTime" label="起始时间">
          <a-date-picker
              style="width: 220px;"
              v-model="form.startTime"
              @change="onChangeStart"
          />
        </a-form-item>
        <a-form-item field="enTime" label="结束时间">
          <a-date-picker
              style="width: 220px;"
              v-model="form.endTime"
              @change="onChangeEnd"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <a-table :columns="columns" :data="userAndRoomData" :pagination="pagination" style="font-style: normal;font-size: 30px">
    <template #optional="{ record }">
      <a-button type="primary" @click="updateInfo(record)">修改</a-button>
      <a-button style="margin-left: 10px" type="primary" status="danger" @click="deleteInfo(record)">删除</a-button>
      <a-modal v-model:visible="visible" title="修改信息" @cancel="handleCancel" @ok="handleOk(record)">
        <a-form :model="form">
          <a-form-item field="name" label="姓名">
            <a-input v-model="form.name"/>
          </a-form-item>
          <a-form-item field="phone" label="手机号">
            <a-input v-model="form.phone"/>
          </a-form-item>
          <a-form-item field="roomId" label="房间号">
            <a-input v-model="form.newRoomId"/>
          </a-form-item>
          <a-form-item field="startTime" label="起始时间">
            <a-date-picker
                style="width: 220px;"
                v-model="form.startTime"
                @change="onChangeStart"
            />
          </a-form-item>
          <a-form-item field="enTime" label="结束时间">
            <a-date-picker
                style="width: 220px;"
                v-model="form.endTime"
                @change="onChangeEnd"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </template>
  </a-table>
</div>
</template>

<style scoped>

</style>